<template>
  <div class="app">
    <!-- 导航面包屑 -->
    <el-card>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>营销</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path:'/home/seckill'}">秒杀</el-breadcrumb-item>
        <el-breadcrumb-item>{{this.$store.state.marketing.action}}秒杀活动</el-breadcrumb-item>
      </el-breadcrumb>
      <h1>{{this.$store.state.marketing.action}}秒杀活动</h1>
    </el-card>

    <!-- 基础信息 -->
    <el-card>
      <el-row>
        <el-col :span="5">
          <p>基础信息</p>
        </el-col>
        <el-col :span="14">
          <el-form ref="addDiscountForm" :model="addDiscountForm" label-width="80px">
            <!-- 占位 -->
            <el-form-item></el-form-item>
            <el-form-item></el-form-item>
            <!-- 活动名称 -->
            <el-form-item label="活动名称">
              <el-input style="width:350px" v-model="addDiscountForm.name" placeholder="请输入名称"></el-input>
            </el-form-item>
            <!-- 原价 -->
            <el-form-item label="原价">
              <el-input style="width:350px" v-model="addDiscountForm.price" placeholder="请输入原价"></el-input>
            </el-form-item>
            <!-- 折扣价 -->
            <el-form-item label="折扣价">
              <el-input
                style="width:350px"
                v-model="addDiscountForm.discountPrice"
                placeholder="请输入名称"
              ></el-input>
            </el-form-item>
            <!-- 库存 -->
            <el-form-item label="库存">
              <el-input style="width:350px" v-model="addDiscountForm.store" placeholder="请输入名称"></el-input>
            </el-form-item>
            <!-- 活动日期 -->
            <el-form-item label="活动日期">
              <el-date-picker
                v-model="addDiscountForm.validity"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
            <!-- 商品限购 -->
            <el-form-item label="商品限购">
              <el-radio v-model="addDiscountForm.restriction" label="不限购">不限购</el-radio>
            </el-form-item>
            <el-form-item>
              <el-radio v-model="addDiscountForm.restriction" label="1">
                <span class="span1">最多购买</span>
                <el-input class="numInp" v-model="addDiscountForm.restrictionInp" placeholder="请输入">
                  <template slot="append">件</template>
                </el-input>
              </el-radio>
            </el-form-item>
            <!-- 显示划线价 -->
            <el-form-item label="划线价">
              <el-checkbox-group v-model="addDiscountForm.markingPrice">
                <el-checkbox label="显示划线价" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="5"></el-col>
      </el-row>
      <el-button style="margin-top:30px;margin-left:312px" type="primary" @click="actionSeckill">提交</el-button>
      <el-button @click="toSeckill">返回</el-button>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addDiscountForm: {
        name: "",
        price: "",
        discountPrice: "",
        store: "",
        status: "",
        validity: "",
        restriction: "",
        markingPrice: "",
        restrictionInp: "",
      },
      //要修改的id
      id: "",
    };
  },
  methods: {
    sizeChange() {
      return;
    },
    pageChange() {
      return;
    },
    //点击跳转添加页面
    toSeckill() {
      this.$router.push("/home/seckill");
    },
    //添加or修改
    actionSeckill() {
      if (this.$store.state.marketing.action == "编辑")
        return this.editSeckill();
      this.addSeckill();
    },
    //添加秒杀
    async addSeckill() {
      const { data: res } = await this.$axios.post("/vip/seckill/add", {
        name: this.addDiscountForm.name + "",
        price: this.addDiscountForm.price + "",
        discountPrice: this.addDiscountForm.discountPrice + "",
        store: this.addDiscountForm.store + "",
        status: "1",
        validity: this.addDiscountForm.validity[1],
        restriction:
          this.addDiscountForm.restriction == "不限购"
            ? "不限购"
            : this.addDiscountForm.restrictionInp,
        markingPrice:
          this.addDiscountForm.markingPrice == true
            ? "显示划线价"
            : "不显示划线价",
      });
      if (res.code != 0) return this.$message.error("秒杀添加失败!");
      this.$message.success("秒杀添加成功!");
      this.toSeckill();
    },
    //修改秒杀
    async editSeckill() {
      const { data: res } = await this.$axios.post("/vip/seckill/update", {
        id: this.id,
        name: this.addDiscountForm.name + "",
        price: this.addDiscountForm.price + "",
        discountPrice: this.addDiscountForm.discountPrice + "",
        store: this.addDiscountForm.store + "",
        status: "1",
        validity: this.addDiscountForm.validity[1],
        restriction:
          this.addDiscountForm.restriction == "不限购"
            ? "不限购"
            : this.addDiscountForm.restrictionInp,
        markingPrice:
          this.addDiscountForm.markingPrice == true
            ? "显示划线价"
            : "不显示划线价",
      });
      if (res.code != 0) return this.$message.error("秒杀修改失败!");
      this.$message.success("秒杀修改成功!");
      this.toSeckill();
    },
  },
  mounted() {
    if (!this.$store.state.marketing.action) return this.toSeckill();
    //渲染修改信息
    if (this.$store.state.marketing.action == "编辑") {
      const info = this.$store.state.marketing.editInfo;
      this.addDiscountForm = {
        name: info.name,
        price: info.price,
        discountPrice: info.discountPrice,
        store: info.store,
        status: "1",
        validity: ["2021-08-01", info.validity],
        restriction: info.restriction == "不限购" ? "不限购" : "1",
        restrictionInp: info.restriction == "不限购" ? "" : info.restriction,
        markingPrice: info.markingPrice == "显示划线价" ? true : false,
      };
      this.id = info.id;
    }
  },
};
</script>

<style lang="less" scoped>
.numInp {
  width: 130px;
  margin: 0 15px;
}
.span1 {
  line-height: 39px;
}
.app > .el-card:nth-child(2),
.app > .el-card:nth-child(3) {
  margin-top: 15px;
}
</style>